<template>
  <Tabs :value="show" >
    <TabPane label="分公司排名" name="company" >
      <div class="charts-border indexChartsSize" @mousemove="handleMouseMove" @mouseenter="enter()" @mouseleave="leave()">
        <company-score-rank></company-score-rank>
      </div>
      <div class="charts-border indexChartsSize">
        <station-score-rank></station-score-rank>
      </div>
      <div class="charts-border indexChartsSize">
        <company-score-trend></company-score-trend>
      </div>
    </TabPane>
    <TabPane label="服务车辆及人次" name="station">
      <div class="charts-border indexChartsSize">
        <company-service-cars-Top5></company-service-cars-Top5>
      </div>
      <div class="charts-border indexChartsSize">
        <company-service-persons-Top5></company-service-persons-Top5>
      </div>
      <div class="charts-border indexChartsSize">
        <company-service-c-a-p-trend></company-service-c-a-p-trend>
      </div>
    </TabPane>
  </Tabs>
</template>

<script>
/*
中间图表统计设计页面
*/
import axios from "axios";
import dayjs from "dayjs";
import constData from "@/util/constData"; // 保存的常量
import {
  getLastMonthDate,
  getLastWeekDate,
  formatXAxisData
} from "@/util/util";

import CompanyScoreRank from "./companyScoreRank";
import StationScoreRank from "./stationScoreRank";
import CompanyScoreTrend from "./companyScoreTrend";

import CompanyServiceCarsTop5 from "./companyServiceCarsTop5";
import CompanyServicePersonsTop5 from "./companyServicePersonsTop5";
import CompanyServiceCAPTrend from "./companyServiceCAPTrend";

import { cancelAxiosList } from "@/api/ajax";
var node_schedule = require("node-schedule");

export default {
  components: {
    CompanyScoreRank,
    StationScoreRank,
    CompanyScoreTrend,
    CompanyServiceCarsTop5,
    CompanyServicePersonsTop5,
    CompanyServiceCAPTrend
  },
  props: {
    // 选择的站点名称
    selectedData: {
      type: Object,
      default: () => new Object({ subCompany: "xian", dateTime: "week" })
    }
  },
  data() {
    return {
      show: "company",
      groupType: "hour", // 查询类型，按月，日，小时
      startTime: "", // 开始时间
      endTime: "" // 结束时间
    };
  },
  watch: {
    selectedData: {
      deep: true,
      handler(value) {
        if (this.selectedData.dateTime === "today") {
        } else if (this.selectedData.dateTime === "week") {
        } else if (this.selectedData.dateTime === "month") {
        }
      }
    }
  },
  mounted() {
    var intervalRightStation = node_schedule.scheduleJob(
      "*/30 * * * * *",
      () => {
        console.log("省级每5秒执行一次!");
        this.show = this.show === "company" ? "station" : "company";
      }
    );
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log("取消首页省级数据");
      intervalRightStation.cancel();
    });
  },
  methods: {
    //初始化
    handleMouseMove(event){
      // console.log('鼠标：', event.offsetX, event.offsetY)
    },
    enter(event){
      // console.log('鼠标enter：', event)
    },
    leave(event){
      // console.log('鼠标leave：', event)
    }
  }
};
</script>

<style lang="less">
.indexChartsSize {
  width: 500px;
  margin-bottom: 10px;
  height: 28vh;
  z-index: 2;
}
.indexChartsSize2 {
  width: 500px;
  height: 28vh;
  z-index: 2;
}
</style>
